<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
<title><c:out value="${not empty ag.id ? '修改应用群组信息':'新增应用群组'}" /></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<jsp:include page="../common/import.jsp"></jsp:include>

</head>
<body>
	 <!-- <div class="iframe-cot pt0" id="smIframe"> -->
       <div class="right-form mt0">
       <form class="add-form" id="editForm" method="post" action="#" onsubmit="return false;">
          <input id="s_id" type="hidden" value="${ag.id}">
		<ul class="w100 layer-form">
               <li>
                   <label class="ser-label"><em style="color:red;">*</em>应用群组名称：</label>
                   <div class="form-content">
                       <input id="s_appGroupName" name="appGroupName" class="inputText" value="${ag.name}" type="text">
                       <div class="form-tips text-red" ></div>
                   </div>
               </li>
               <li>
                   <label class="ser-label">描述：</label>
                   <div class="form-content">
                       <input id="s_description" name="description" class="inputText" value="${ag.description}" type="text">
                   	   <div class="form-tips text-red" ></div>
                   </div>
               </li>
               
                <li style="width:100%;">
                   <label class="ser-label">应用选择：</label>
               	  <!--  <div class="form-content"> -->
               	   
					          <div class="area-div mt15 clearfix" style="float:left">
					              <dl class="area-list-left pull-left" id="left_select">
					                  <dt>已选择</dt>
					                  <c:forEach items="${selectedAppList }" var="sa">
                            	     	<dd value="${sa.code }" > ${sa.name }</dd>
                            	     </c:forEach>
					              </dl>
					
					              <div class="btn-group pull-left">
					                <div class="btn-middle">
					                  <button class="go-right" onclick="delArea()"> > </button>
					                  <button class="go-left" onclick="addArea()"> < </button>
					                </div>
					              </div>
					              
					              <dl class="area-list-right pull-left">
					                  <dt>未选择</dt>
					                  <c:forEach items="${noSelectedAppList }" var="na">
                            	     	<dd value="${na.code }"> ${na.name }</dd>
                            	     </c:forEach>
					              </dl>
					          </div>
					          
					     
               	   <!-- </div> -->
               </li>			 
               			
               <li class="w-per">
                   <label class="ser-label">&nbsp;</label>
                   <div class="form-content clearfix">
                       <button class="btn btn-orange" id="savebtn" onclick="save()" ><i class="fa fa-save mr5"></i>保存</button>
                       <button id="cancelBtn" class="btn btn-default" onclick="closeLayerOpen()"><i class="fa fa-reply mr5"></i>返回</button>
                   </div>
               </li>
            </ul>
    	</form>
    </div>
  <!-- </div>  -->     
</body>
<script type="text/javascript">
function closeLayerOpen(){
	parent.layer.close(parent.layer.getFrameIndex(window.name));
}

$("#editForm").validate({
	onkeyup : false,
	onsubmit: false,
	onfocusout:  function(element){
	      $(element).valid() ;
				 }, 
	rules : {
		appGroupName : {
			required : true,
			maxlength:50,
			isContainsSpecialChar: true 
		},
		description : {
			
			maxlength:50,
		}
	},
	messages : {
		appGroupName : {
			required : "请完善必填信息",
			maxlength : "请输入正确的应用群组名称",
			isContainsSpecialChar : "请输入正确的应用群组名称"
		},
		description : {
			maxlength : "请输入正确的描述"
		}
	},
	errorPlacement: function(error, element) {
		 if(error){    //error存在的时候
			 $(element).next().html(error); //showMsg为你自定义的信息显示区域的id。
			
		 }                            //这里的element是录入数据的对象  
		 $(element).addClass('input-danger');
		 
	 },
	 success:function(label){
		 $(label).parent().prev().removeClass('input-danger');
		
	 }
});


function save(){
	if(!$("#s_appGroupName").valid() || !$("#s_description").valid()){
		
		return false;
	}
	
	var id=$("#s_id").val();
	var name=$("#s_appGroupName").val();
	
	var description = $("#s_description").val();
	var appIds = '';
	$('#left_select dd').each(function(i){
		if(i==0){
			appIds = appIds+$(this).attr('value');
		}else{
			appIds = appIds+','+$(this).attr('value');
		}
	});
	var data={
			id:id,
			name:$.trim(name),
			description:description,
			appIds:appIds
			};
	console.log(data);
	//防止多次点击
	$("#savebtn").attr('disabled','disabled');
	
	
 	$.post("${ctx}/appgroup/save",data,function(result){
		if(result.code=="success"){
			 layer.msg('操作成功', {
  	            icon: 1
  	        });
			 if(id == null || id == ''){
				 window.parent.jumpPage(1);
			 }else{
				 window.parent.jumpPage();
			 }
			 
			 setInterval("parent.layer.close(parent.layer.getFrameIndex(window.name))",2000);
			 
		}else{
			layer.msg('操作失败', {
  	            icon: 2
  	        });
			$("#savebtn").removeAttr('disabled');
		}
		
		
		
	},"json"); 
}

$(function(){
    $(".area-list-left").on("click","dd",function(){       //点击元素dd
        var cla = $(this).attr("class");
        if (cla) {
            //以空格为断点分割字符串
            var clarray = cla.split(" ");          
        }
        //判断active是否包含在数组里，不包含则返回-1
        var num = jQuery.inArray("active",clarray);   
        if ( num == -1) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    });

    $(".area-list-right").on("click","dd",function(){
        var cla = $(this).attr("class");
        if (cla) {
            var clarray = cla.split(" ");
        }
        var num = jQuery.inArray("active",clarray);
        if ( num == -1) {
            $(this).addClass("active");
        }else{
            $(this).removeClass("active");
        }
    })
})

function delArea(){
    var dlText = "";
    $(".area-list-left .active").each(function(){
        var ddText = $(this).html();
        var v = $(this).attr('value');
        dlText += "<dd value='"+v+"'>" + ddText +"</dd>";
        $(this).remove();
    })
    
    $(".area-list-right").append(dlText);
}
function addArea(){
    var dlText = "";
    $(".area-list-right .active").each(function(){
        var ddText = $(this).html();
        var v = $(this).attr('value');
        dlText += "<dd value="+v+">" + ddText +"</dd>";
        $(this).remove();
    })
	
    $(".area-list-left").append(dlText);
}

</script>
</html>